<template>
  <div class="trend-chart">

  </div>
</template>

<script setup>
import * as echarts from 'echarts/core'
import {
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import { BarChart, LineChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import { onMounted, watch } from "vue"
import { isEqual } from 'lodash'
import { OptionProps } from 'element-plus/es/components/select-v2/src/defaults'

const props = defineProps({
  data: {
    type: Object,
    default: () => { }
  }
})
echarts.use([
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  LineChart,
  CanvasRenderer,
  UniversalTransition
])
let myChart

const buildOptions = () => {
  const { dailyCurve, monthAmountList } = props.data
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        // 指示器样式
        crossStyle: {
          // 色值
          color: '#999'
        }
      }
    },
    // toolbox: {
    //   feature: {
    //     dataView: { show: true, readOnly: false },
    //     magicType: { show: true, type: ['line', 'bar'] },
    //     restore: { show: true },
    //     saveAsImage: { show: true }
    //   }
    // },
    // 图例配置
    legend: {
      // 图例数据
      data: ['月累计收益', '日累计收益'],
      // 图例位置
      right: 0
    },
    xAxis: [
      {
        type: 'category',
        data: dailyCurve.map((cur) => cur.time),
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [{
      type: 'value',
      // name: 'Precipitation',
      min: 0,
      max: function (value) {
        return parseInt(value.max)
      },
      interval: 30,
      axisLabel: {
        formatter: '{value} 万元'
      }
    }],
    series: [
      {
        // 图表名字，对应 legend.data[0]
        name: '月累计收益',
        // 图表类型
        type: 'bar',
        // 柱的宽度
        barWidth: 20,
        // 提示框展示配置
        tooltip: {
          // 提示框展示的内容
          valueFormatter: function (value) {
            return value + '万元'
          }
        },
        // 数据源
        data: monthAmountList.map(item => item.amount)
      },
      {
        // 图表名字，对应 legend.data[0]
        name: '日累计收益',
        // 图表类型
        type: 'line',
        // 柱的宽度
        barWidth: 20,
        // 提示框展示配置
        tooltip: {
          // 提示框展示的内容
          valueFormatter: function (value) {
            return value + '万元'
          }
        },
        // 数据源
        data: dailyCurve.map(item => item.amount)
      }
    ]
  }
  return option
}

onMounted(() => {
  const chartDom = document.querySelector('.trend-chart')
  myChart = echarts.init(chartDom)
  myChart.setOption(buildOptions())
})

watch(() => props.data, (newVal, oldVal) => {
  if (isEqual(newVal), oldVal) return
  myChart.setOption(buildOptions())
}, {
  deep: true
})

</script>

<style lang="scss" scoped>
.trend-chart {
  height: 100%
}
</style>